<template>
  <div class="particles-wrap">
    <div id="particles-js" :class="{ hasBg: isBg }"></div>
  </div>
</template>

<script>
    import particlesConfig from "./particles.json";
    export default {
        mounted() {
            this.init();
        },
        methods: {
            init() {
                particlesJS("particles-js", particlesConfig);
                // document.body.style.overflow = "hidden";
            }
        },
        computed: {
            isBg() {
                let a = this.$store.state.isBg ? this.$store.state.isBg : sessionStorage.getItem('isBg')
                if (a) {
                    if (a == 'login') {
                        return true
                    } else if (a == 'noLogin') {
                        return false
                    }
                } else {
                    return true
                }
            }
        }
    };
</script>

<style scoped lang="less">
.particles-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#particles-js{
    height: calc(100vh);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fefefe;
}
#particles-js.hasBg {
    background-image: url('../../assets/img/loginBG.jpg');
}
</style>
